<template>
	<u-popup v-model="show" @close="handleClose" mode="bottom" height="60%" class="max-w-[750px]">
		<view class="fixed w-full bg-[#1B1F45] z-10  py-[16rpx]">
			<view class="text-center font-bold py-[16rpx]">
				{{t('login.countryCodeChoose')}}
			</view>
			<view class="px-[40rpx]">
				<u-search shape="square" :show-action="false" :placeholder="t('login.countryCodeSearch')" v-model="formData.keyword"></u-search>
			</view>
			
		</view>
		<view class="pt-[200rpx]">
			<view v-for="item in keywordFliter" @click="handleChoose(item)" >
				<view class="flex justify-start items-center px-[40rpx] py-[10rpx]">
					<view class="mt-[16rpx]">
						<u-icon width="60rpx" height="40rpx" :name="item.logo"></u-icon>
					</view>
					<view class="ml-[20rpx] mr-[10rpx]">
						{{item.name}}
					</view>
					<view class="">
						( {{item.code}} )
					</view>
				</view>
			
			</view>
		</view>
		
	</u-popup>
</template>
<script lang="ts" setup>
	import { reactive, computed } from 'vue'
	import { t } from '@/utils/util'

	const props = defineProps({
		list: {
			type: Array
		},
		show: {
			type: Boolean,
		}
	})
	const emit = defineEmits<{
		(event : 'update', value : any) : void
	}>()

	const formData = reactive({
		keyword: '',
	})
	
	//根据输入框内容塞选
	const keywordFliter = computed(() => {
	    const lists = props.list??[]
	    if (!formData.keyword) {
	        return props.list
	    }
	    const inputValue = formData.keyword
	    return lists.filter((item: any) => {
	        if (item['code'].indexOf(inputValue) !== -1) {
	            return item
	        }
	    })
	})
	
	const handleChoose = async (item:any) => {
		emit('update', {
			code: item['code'],
			show: false
		})
	}
	const handleClose = async () => {
		emit('update', {
			code: '',
			show: false
		})
	}
</script>

<style lang="scss" scoped>
	.avatar-upload {
		background: #fff;
		overflow: hidden;

		&::after {
			border: none;
		}
	}
</style>